<template>
  <div class="app-container">
     <!-- 表格数据 -->
     <el-table v-loading="loading" :data="roleList" default-expand-all :border="false">
       <el-table-column type="expand" width="50" align="center">
         <template #default="props">
           <div style="padding-left: 40px;box-sizing: border-box;">
             <el-table v-loading="loading" :data="props.row.roleList" :border="true">
               <el-table-column label="#" type="index" :show-overflow-tooltip="true" width="45" align='center' />
               <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" />
               <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" />
               <el-table-column label="状态">
                   <template #default="scope">
                     <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" v-if="scope.row.roleId !== 1"
                       @change="handleStatusChange(scope.row)" ></el-switch>
                   </template>
               </el-table-column>
               <el-table-column label="创建时间" prop="createTime">
                   <template #default="scope">
                     <span>{{ parseTime(scope.row.createTime) }}</span>
                   </template>
               </el-table-column>
               <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="320">
                   <template #default="scope">
                     <el-button link type="primary" @click="handleUpdate(scope.row, props.row)" v-if="scope.row.roleId !== 1" 
                       v-hasPermi="['system:role:edit']">编辑</el-button>
                     <el-divider direction="vertical" v-if="scope.row.roleId !== 1" />
                     <el-button link type="primary" @click="handleDataScope(scope.row)" v-if="scope.row.roleId !== 1" 
                       v-hasPermi="['system:role:edit']">数据权限</el-button>
                     <el-divider direction="vertical" v-if="scope.row.roleId !== 1" />
                     <el-button link type="primary" @click="handleAuthUser(scope.row)" v-if="scope.row.roleId !== 1" 
                       v-hasPermi="['system:role:edit']">关联员工</el-button>
                     <el-divider direction="vertical" v-if="scope.row.roleId !== 1" />
                     <el-button link type="danger" @click="handleDelete(scope.row)" v-if="scope.row.roleId !== 1" 
                       v-hasPermi="['system:role:remove']">删除</el-button>
                   </template>
               </el-table-column>
             </el-table>
           </div>
         </template>
       </el-table-column>
       <el-table-column label="系统名称" prop="systemName"></el-table-column>
       <el-table-column label="操作" align="center" width="120" fixed="right" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-button type="primary" icon="plus" link @click="handleAdd(scope.row)" v-if="scope.row.roleId !== 1" 
               v-hasPermi="['system:role:edit']">新建角色</el-button>
           </template>
       </el-table-column>
     </el-table>
     <!-- 角色信息编辑抽屉 -->
     <RoleEditDrawer v-model:show="open" :title="title" :formData="defaultData" :systemInfo="systemInfo"
       @submit="submitForm"></RoleEditDrawer>
     <!-- 分配角色数据权限抽屉 -->
     <DataPermissitonDrawer v-model:show="openDataScope" :defaultValue="rowData"></DataPermissitonDrawer>
     <!-- 关联员工抽屉 -->
     <AuthUserDrawer v-model:show="authUserShow" :roleId="roleId"></AuthUserDrawer>
     
  </div>
</template>

<script setup name="Role">
import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
import RoleEditDrawer from "./components/RoleEditDrawer.vue"
import DataPermissitonDrawer from "./components/DataPermissitonDrawer.vue"
import AuthUserDrawer from "./components/AuthUserDrawer.vue"
const { proxy } = getCurrentInstance();
const roleList = ref([]);
const open = ref(false);
const loading = ref(true);
const ids = ref([]);
const title = ref("");
const dateRange = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const openDataScope = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);

const roleId = ref(null);
const rowData = ref({});
const authUserShow = ref(false);

const defaultData = ref({});
const systemInfo = ref({
 sysTemValue: 'oms',
 systemName: 'oms系统'
});
const data = reactive({
 form: {},
 queryParams: {
   pageNum: 1,
   pageSize: 10,
   roleName: undefined,
   roleKey: undefined,
   status: undefined
 },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询角色列表 */
function getList() {
 loading.value = true;
 listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
   roleList.value = response.rows;
   loading.value = false;
 });
}
/** 搜索按钮操作 */
function handleQuery() {
 queryParams.value.pageNum = 1;
 getList();
}
/** 重置按钮操作 */
function resetQuery() {
 dateRange.value = [];
 proxy.resetForm("queryRef");
 handleQuery();
}
// 删除按钮操作
function handleDelete(row) {
 const roleIds = row.roleId || ids.value;
 proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
   return delRole(roleIds);
 }).then(() => {
   getList();
   proxy.$modal.msgSuccess("删除成功");
 }).catch(() => {});
}
// 角色状态修改
function handleStatusChange(row) {
 let text = row.status === "0" ? "启用" : "停用";
 proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
   return changeRoleStatus(row.roleId, row.status);
 }).then(() => {
   proxy.$modal.msgSuccess(text + "成功");
 }).catch(function () {
   row.status = row.status === "0" ? "1" : "0";
 });
}
/** 分配用户 */
function handleAuthUser(row) {
 roleId.value = row.roleId;
 authUserShow.value = true;
}
/** 重置新增的表单以及其他数据  */
function reset() {
 if (menuRef.value != undefined) {
   menuRef.value.setCheckedKeys([]);
 }
 menuExpand.value = false;
 menuNodeAll.value = false;
 deptExpand.value = true;
 deptNodeAll.value = false;
 form.value = {
   roleId: undefined,
   roleName: undefined,
   roleKey: undefined,
   roleSort: 0,
   status: "0",
   menuIds: [],
   deptIds: [],
   menuCheckStrictly: true,
   deptCheckStrictly: true,
   remark: undefined
 };
 proxy.resetForm("roleRef");
}
/** 添加角色 */
function handleAdd(row) {
 title.value = "新建角色";
 defaultData.value = {};
 systemInfo.value.sysTemValue = row.sysTemValue;
 systemInfo.value.systemName = row.systemName;
 open.value = true;
}
/** 修改角色 */
function handleUpdate(row, systemRow) {
 title.value = "修改角色";
 defaultData.value = row;
 systemInfo.value.sysTemValue = systemRow.sysTemValue;
 systemInfo.value.systemName = systemRow.systemName;
 open.value = true;
}
/** 提交按钮 */
const submitForm = (formData) => {
 console.log('formData', formData);
 if (formData.value.roleId != undefined) {
   updateRole(formData.value).then(response => {
     proxy.$modal.msgSuccess("修改成功");
     open.value = false;
     getList();
   });
 } else {
   addRole(formData.value).then(response => {
     proxy.$modal.msgSuccess("新增成功");
     open.value = false;
     getList();
   });
 }
}
/** 分配数据权限操作 */
function handleDataScope(row) {
 rowData.value = row;
 openDataScope.value = true;
}
/** 提交按钮（数据权限） */
function submitDataScope() {
 if (form.value.roleId != undefined) {
   form.value.deptIds = getDeptAllCheckedKeys();
   dataScope(form.value).then(response => {
     proxy.$modal.msgSuccess("修改成功");
     openDataScope.value = false;
     getList();
   });
 }
}
/** 取消按钮（数据权限）*/
function cancelDataScope() {
 openDataScope.value = false;
 reset();
}

getList();
</script>
